<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import Location from '@/components/Location/index.vue'
import useModal from '@/hooks/useModal'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { store } = useModal()
const formRef = ref() as Ref<FormInstance>

const detail = reactive({
  id: props.id || '',
  name: '',
  address: '',
  city: '',
  consignee: '',
  district: '',
  isDefault: 0,
  mobile: '',
  province: '',
  lat: '',
  lng: '',
  verifyId: [] as any,
})
const region = ref<string[]>([])
const regionTree = ref<any[]>([])
const getRegionTree = () => {
  get({ url: '/server-shop/sys-seller/region/tree' }, ({ data }) => {
    regionTree.value = data
  })
}
getRegionTree()
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      query.verifyId = detail.verifyId.join(',')
      post(
        { url: '/server-shop/sys-seller/seller/address/submit', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          if (code == 200) {
            emit('update:show', false)
            emit('confirm')
          }
          done(code == 200)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/sys-seller/seller/address/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
    detail.verifyId = data.verifyId.split(',')
    region.value = [detail.province, detail.city, detail.district]
  })
}
onMounted(() => {
  if (props.id) getInfo()
})
const setMap = data => {
  console.log('🚀 ~ setMap ~ data:', data)
  const [lat, lng] = data.position
  const { province, city, district, street_number } = data.info.address_component
  detail.lat = lat
  detail.lng = lng
  detail.address = street_number
  console.log('🚀 ~ detail:', detail)
  detail.district = district
  detail.province = province
  detail.city = city

  store.cancel()
}
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="500px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item label="地址名称" field="name" :rules="[{ required: true, message: '请输入地址名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入地址名称" />
        </a-form-item>

        <a-form-item label="收件人" field="consignee" :rules="[{ required: true, message: '请输入收件人' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.consignee" placeholder="请输入收件人" />
        </a-form-item>
        <a-form-item label="联系方式" field="mobile" :rules="[{ required: true, message: '请输入联系方式' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.mobile" placeholder="请输入联系方式" />
        </a-form-item>

        <a-form-item label="选择地址" field="lng" :rules="[{ required: true, message: '请选择地址' }]" :validate-trigger="['change', 'blur']">
          <a-button @click="store.handleShow({})" type="primary">选择地址</a-button>
        </a-form-item>
        <!-- <a-form-item label="省市区" field="district" :rules="[{ required: true, message: '请选择省市区' }]" :validate-trigger="['change', 'blur']">
          <a-cascader v-model="region" :options="regionTree" path-mode placeholder="请选择省市区" :field-names="{ label: 'title', value: 'title' }" @change="data => ([detail.province, detail.city, detail.district] = data as any[])" />
        </a-form-item> -->
        <a-form-item label="详细地址" field="address" :rules="[{ required: true, message: '请输入详细地址' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.address" readonly placeholder="请输入详细地址" />
        </a-form-item>
      </a-form>
    </div>
  </CModal>
  <Location v-if="store.show" v-model:show="store.show" @setMap="setMap" />
</template>
<style lang="less" scoped></style>
